<template>
	<view>
		<view v-for="(item, index) in couponList" :key="index" class="coupon_box">
			<view class="left">
				<view class="left_top">
					<text class="hui" :style="'background:' + colors">惠</text>
					<text class="hui_name">{{ item.name }}</text>
				</view>
				<view class="left_bottom">
					<text>
						<slot>有效期：</slot>
						{{ item.dates }}
					</text>
				</view>
			</view>
			<image src="./ysy.png" class="ysy" v-if="item.status == 1"></image>
			<view class="right" :style="'background:' + (item.status == 0 ? colors : '')">
				<view class="money">￥{{ item.sub }}</view>
				<text>满{{ item.money }}可用</text>
				<text class="shiyong" :style="{ color: colors }" v-if="item.status == 0" @click="jumpNext(item)">去使用</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},

	components: {},
	props: {
		colors: {
			type: String
		},
		couponList: {
			type: Array
		}
	},
	methods: {
		jumpNext(item) {
			this.$emit('itemClick', item);
		}
	}
};
</script>

<style scoped lang="scss">
.coupon_box {
	margin: 28upx 28upx;
	box-shadow: 0upx 0upx 10upx #ddd;
	position: relative;
	border-radius: 10upx;
	overflow: hidden;
}

.coupon_box .left {
	width: 60%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 20upx;
	float: left;
}

.coupon_box .left .hui {
	width: 40upx;
	height: 40upx;
	font-size: 20upx;
	color: #fff;
	background-color: #ec1818;
	border-radius: 8upx;
	line-height: 40upx;
	text-align: center;
	display: inline-block;
	transform: translateY(-5upx);
}

.coupon_box .left .left_top {
	width: 60vw;
	display: block;
	font-size: 26upx;
	font-weight: bold;
}

.left_top .hui_name {
	line-height: 60upx;
	height: 60upx;
	margin-left: 20upx;
	display: inline-block;
}

.left_bottom {
	font-size: 24upx;
	font-weight: bold;
	color: #333;
	height: 60upx;
	line-height: 60upx;
}

.coupon_box .right {
	text-align: center;
	height: 160upx;
	width: 220upx;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	background-color: #a8a8a8;
	float: right;
}

.coupon_box .right .shiyong {
	height: 40upx;
	line-height: 40upx;
	background-color: #fff;
	border-radius: 20upx;
	padding: 0 20upx;
	color: #a8a8a8;
}

.coupon_box .right .money {
	font-size: 45upx;
	color: #fff;
}

.coupon_box .right text {
	font-size: 24upx;
	color: #fff;
	height: 40upx;
	line-height: 34upx;
}

.coupon_box .bottom {
	height: 60upx;
	line-height: 60upx;
	display: flex;
	align-content: flex-start;
	font-size: 24upx;
	margin-top: 10upx;
}

.coupon_box .bottom view {
	margin-right: 20upx;
	color: #888;
	font-weight: bold;
}

.ysy {
	width: 80upx;
	height: 80upx;
	position: absolute;
	top: 20upx;
	right: 200upx;
}
</style>
